<template>
<div>
<Drawer :closable="false" width="1000" v-model="detail">
<PageHeader :tab-list="tabList" :tab-active-key="tabActiveKey" class="sky-pageHeader" @on-tab-change="handleChangeTab">
        <div slot="title">
         刘鸾英  13565658858
            <Poptip trigger="hover" placement="bottom" width="165">
               <span><Icon type="md-phone-portrait" class="ivu-mr-8" /></span>
            <List header="历史号码" slot="content">
            <ListItem>15656556658</ListItem>
            <ListItem>13856556658</ListItem>
            <ListItem>17956556658</ListItem>
        </List></Poptip>
        <span class="sky-s1">女 26</span>
                    <Tag color="volcano">复诊</Tag>
                </div>
                <div slot="action">
            <b v-if="antiState" @click="handleAnti" ><Icon type="ios-git-compare" /></b>
            <b v-else @click="handleUnAnti"> <Icon type="md-git-compare" /></b>
          <b v-if="follow" @click="handleFollow" ><Icon type="md-heart-outline" /></b>
        <b v-else  @click="handleUnFollow"><Icon type="md-heart" /></b>
            <ButtonGroup>
                <Button @click="handleRender">备注</Button>
                <Button @click="handleOpenDrawer">编辑</Button>
            </ButtonGroup>
            <Button type="primary" @click="handleReturnVisit">回访</Button>
        </div>
                <div slot="content">
     <DescriptionList :col="1">
         <Description term="标签：">
                           <Tag closable>标签一</Tag>
                           <Tag closable>标签二</Tag>
    <Tag v-if="show" closable @on-close="handleClose">标签三</Tag>
    <Button icon="ios-add" size="small" @click="handleAdd">添加标签</Button>
    </Description>
                    </DescriptionList>
                    <DescriptionList :col="4">
                        <Description term="所属医助：">高玲</Description>
                        <Description term="所属客服：">高玲</Description>
                        <Description term="到诊时间：">2019-07-16</Description>
                        <Description term="诊室：">3诊</Description>
                        <Description term="下次复诊日期：">2019-07-28</Description>
                        <Description term="回访次数：">3次</Description>
                        <Description term="下次回访时间：">2019-07-16</Description>
                        <Description term="居住城市：">合肥</Description>
                        </DescriptionList>
        </div>
</PageHeader>
    <div class="ivu-p-16">
        <basic v-if="tabActiveKey === 'basic'" />
        <Case v-if="tabActiveKey === 'Case'" />
        <consume v-if="tabActiveKey === 'consume'" />
        <Treatment v-if="tabActiveKey === 'Treatment'" />
        <Images v-if="tabActiveKey === 'Images'" />
        <returnVisit v-if="tabActiveKey === 'returnVisit'" />
        <trace v-if="tabActiveKey === 'trace'" />
        <Journal v-if="tabActiveKey === 'Journal'" />
        <Modal v-model="addTag"
            @on-ok="handleOk"
            @on-cancel="handleCancel"
            title="添加标签"
            :mask-closable="false"
            width="600"
        >
        <Form :label-width="100">
            <FormItem label="活动：" class="ivu-mb-8">
                <tag color="primary">援助活动</tag><tag>抗复发</tag><tag>援助活动</tag><tag>抗复发</tag><tag>援助活动</tag><tag color="primary">抗复发</tag><tag>援助活动</tag><tag>抗复发</tag>
            </FormItem>
             <FormItem label="优惠：" class="ivu-mb-8">
                <tag>援助活动</tag><tag>抗复发</tag>
            </FormItem>
        </Form>
        </Modal>
        <handleReturnVisit ref="handleReturnVisit" />
    </div>
    </Drawer>
    <edit-patient ref="editPatient" />
    </div>
</template>

<script>
    import handleReturnVisit from '@/components/returnVisit';
    import returnVisit from './returnVisit';
    import Case from './Case';
    import Treatment from './Treatment';
    import consume from './consume';
    import basic from './basic';
    import Images from './detailed-Images';
    import Journal from './Journal';
    import editPatient from '@/components/editPatient'
    export default {
        name: 'index',
        components: { returnVisit, handleReturnVisit, basic, Case, Treatment, consume, Images, Journal, editPatient },
        data () {
            return {
                addTag: false,
                antiState: true,
                follow: true,
                show: true,
                modal: false,
                detail: false,
                loading: false,
                value: '',
                anit: '',
                text: '标为抗复发',
                tabActiveKey: 'basic',
                tabList: [
                    {
                        label: '基础',
                        name: 'basic'
                    },
                    {
                        label: '回访',
                        name: 'returnVisit'
                    },
                    {
                        label: '病历',
                        name: 'Case'
                    },
                    {
                        label: '治疗',
                        name: 'Treatment'
                    },
                    {
                        label: '消费',
                        name: 'consume'
                    },
                    {
                        label: '治疗图片',
                        name: 'Images'
                    },
                    {
                        label: '日志',
                        name: 'Journal'
                    }
                ]
            }
        },
        mounted () {
            console.log(this.tabList.type)
        },
        methods: {
            handleCancel () {
                this.showUpdate = false;
            },
            handleOk () {
                this.showUpdate = false;
                this.$Message.success('添加成功');
            },
            handleOpenDrawer () {
                this.$refs.editPatient.handleOpenDrawer()
            },
            handleDrawer () {
                this.drawer = false;
                this.$Message.success('编辑成功');
            },
            handleRender () {
                this.$Modal.confirm({
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.vaule,
                                autofocus: true,
                                type: 'textarea',
                                placeholder: '请输入备注内容'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                }
                            }
                        })
                    }
                })
            },
            handleReturnVisit () {
                this.$refs.handleReturnVisit.handleReturnVisit()
            },
            handleClose () {
                this.$Modal.confirm({
                    title: '标签删除确认',
                    content: '<p>是否确定删掉此标签</p>',
                    onOk: () => {
                        this.$Message.info('删除成功');
                        this.show = false;
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            handleAdd () {
                this.addTag = true;
            },
            handleOpenRemarks () {
                this.$Modal.confirm({
                    width: 500,
                    render: (h) => {
                        return h('Input', {
                            props: {
                                value: this.value,
                                autofocus: true,
                                type: 'textarea',
                                placeholder: '请输入备注内容'
                            },
                            on: {
                                input: (val) => {
                                    this.value = val;
                                }
                            }
                        })
                    }
                })
            },
            handledetail () {
                this.detail = true
            },
            handleChangeTab ({ name }) {
                this.tabActiveKey = name;
            },
            handleAnti () {
                this.$Message.success('标为抗复发')
                this.antiState = false;
            },
            handleUnAnti () {
                this.$Message.success('取消抗复发')
                this.antiState = true
            },
            handleFollow () {
                this.$Message.success('关注成功')
                this.follow = false;
            },
            handleUnFollow () {
                this.$Message.success('取消关注')
                this.follow = true
            }
        }
    }
</script>
<style scoped>
.time {
    font-size: 14px;
    font-weight: bold;
}
.content {
    padding: 10px 0;
}
.consultant {
    color: #9ea7b4;
}
.c-inr {
    margin: 0 10px;
}
h4 span {
    margin-left: 5px;
}
.title {
    font-weight: bold;
    font-size: 16px;
    padding: 24px 0 0 24px;
}
.sky-screen {
    margin-top: 16px;
}
.sky-s1 {
    font-size: 14px;
    margin: 0 16px;
    color: #666;
}
.sky-s2 {
    font-size: 12px;
    margin-left: 16px;
    color: #888;
}
.sky-note {
    padding: 5px 0;
}
.sky-pageHeader {
    padding:0px 12px;
}
.sky-pageHeader b {
    font-size:18px;
    font-weight:bold;
    margin-right:16px;
}
</style>
